<template>
  <div class="page-box" v-loading="listLoading">
    <div class="admin_sider_right">
      <div class="btn_content">
        <div class="mains_time" style="padding: 30px 30px 0">
          <el-button icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
        </div>
        <div class="mains_basic">
          <div class="basic_content">
            <div class="basic_left">
              <h3>基本信息</h3>
              <div class="basic_information">
                <p>
                  <span>
                    <em class="formateFont">姓&emsp;&emsp;名:</em>
                    {{ content.uName }}
                  </span>
                  <span>
                    <em class="formateFont">身份证:</em>
                    {{ content.uIdCard }}
                  </span>
                </p>
                <p class="basic_tel">
                  <span>
                    <em class="formateFont">职&emsp;&emsp;位:</em>
                    <span>{{ content.job }}</span>
                  </span>
                  <span>
                    <em class="formateFont">手&emsp;机:</em>
                    {{ content.uTel }}
                  </span>
                </p>
                <p>
                  <em class="formateFont">公司名称:</em>
                  {{ content.company }}
                </p>
                <p>
                  <span>
                    <em class="formateFont">行&emsp;&emsp;业:</em>
                    {{ content.industry }}
                  </span>
                  <span>
                    <em class="formateFont">规&emsp;模:</em>
                    {{ content.scale }}
                  </span>
                </p>
                <p>
                  <em class="formateFont">邮&emsp;&emsp;箱:</em>
                  {{ content.uEmail }}
                </p>
              </div>
            </div>
            <div class="basic_right">
              <p class="ticket_status">
                <span class="el-icon-warning"></span>
                <em class="formateFont">门票状态:</em>
                <span v-if="content.isActive == 0">未激活</span>
                <span v-else>已激活</span>
              </p>
              <p class="ticket_title">
                <i>
                  <em class="formateFont">来&nbsp;源:</em>
                  <i v-if="content.source == 1">阿里</i>
                  <i v-else-if="content.source == 2">大麦</i>
                  <i v-else>赠票</i>
                </i>
                <span>
                  <em class="formateFont">规&nbsp;格:</em>
                  {{ content.tTypeName | formateMapForStr}}
                </span>
                <span>
                  <em class="formateFont">激活码:</em>
                  {{ content.inviteCode }}
                </span>
              </p>
            </div>
          </div>
        </div>
        <div class="orders">
          <h3>订单信息</h3>
          <div class="mains_order mains_basic">
            <div class="order_left">
              <p>
                <span>
                  <em class="formateFont">订单号:</em>
                  {{ tickinfo.orderCode || "" }}
                </span>
              </p>
              <p>
                <span>
                  <em class="formateFont">合&emsp;计:</em>
                  {{ tickinfo.activations + tickinfo.unactivations || "0" }}张
                </span>
                <span>
                  <em class="formateFont">激&emsp;活:</em>
                  {{ tickinfo.activations || "0" }}张
                </span>
                <span>
                  <em class="formateFont">未激活:</em>
                  {{ tickinfo.unactivations || "0" }}张
                </span>
              </p>
              <!-- <ul class="tick_type">
                <li v-for="(item,key) in cacheTicket" :key="key" style="color:#606266;font-weight:bold">{{ key }} x {{ item |formateMapForStr}}</li>
              </ul> -->
            </div>
            <div class="order_right">
              <p class="formateFont">备注内容</p>
              <p>{{ tickinfo.detail }}</p>
            </div>
          </div>
        </div>
        <div class="mains_purchase" v-show="infos.bName">
          <div class="purchase_title">
            <h3>购买人信息</h3>
          </div>
          <div class="purchase_left mains_basic">
            <p>
              <span>
                <em class="formateFont">姓&nbsp;&nbsp;名:</em>
                {{infos.bName}}
              </span>
              <span>
                <em class="formateFont">身 份 证:</em>
                {{ infos.bIdCard }}
              </span>
              <span>
                <em class="formateFont">手&nbsp;&nbsp;机:</em>
                {{infos.bTel}}
              </span>
              <span>
                <em class="formateFont">职&nbsp;&nbsp;位:</em>
                <span v-if="infos.bJob == 1">高级管理人员（CxO）</span>
                <span v-if="infos.bJob == 2">CIO/CTO/技术副总裁/总工程师</span>
                <span v-if="infos.bJob == 3">业务线负责人</span>
                <span v-if="infos.bJob == 4">政府及事业单位管理人员</span>
                <span v-if="infos.bJob == 5">技术总监/研发总监</span>
                <span v-if="infos.bJob == 6">技术经理/研发经理</span>
                <span v-if="infos.bJob == 7">项目经理</span>
                <span v-if="infos.bJob == 8">IT顾问</span>
                <span v-if="infos.bJob == 9">架构师</span>
                <span v-if="infos.bJob == 10">IT运维</span>
                <span v-if="infos.bJob == 11">开发者</span>
                <span v-if="infos.bJob == 12">合作伙伴</span>
                <span v-if="infos.bJob == 13">学生</span>
                <span v-if="infos.bJob == 14">其他</span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryOrderByOrderId, queryTicketListByOrderId } from "@/api/api.js";

export default {
  data() {
    return {
      listLoading: false,
      infos: {},
      tickinfo: {
        activations: null,
        unactivations: null
      },
      cacheTicket: {},
      content: {}
    };
  },
  created() {
    this.initList();
    this.ticketList();
  },
  methods: {
    async initList() {
      this.listLoading = true;
      this.content = this.$route.query;
      this.$route.query.ascription = this.$route.query.ascription - 0;
      this.$route.query.activityId = this.$route.query.activityId - 0;
      this.$route.query.orderId = this.$route.query.orderId - 0;
      const params = {
        activityId: this.$store.state.activityId.thisActivityId,
        ...this.$route.query
      };
      const { data } = await queryOrderByOrderId(params);
      if (data.success) {
        this.infos = data.result;
      }
      this.listLoading = false;
    },
    async ticketList() {
      this.listLoading = true;
      this.$route.query.ascription = this.$route.query.state - 0;
      const params = { ...this.$route.query };
      const { data } = await queryTicketListByOrderId(params);
      if (data.success) {
        let resultList = data.result;
        let activation = []; // 激活
        let unactivation = []; // 未激活
        for (let i = 0; i < resultList.length; i++) {
          let elem = resultList[i];
          if (!this.cacheTicket[elem.tTypeName]) {
            this.cacheTicket[elem.tTypeName] = 0;
          }
          this.cacheTicket[elem.tTypeName] += 1;
          this.tickinfo = elem;

          if (elem.isActive == 1) {
            this.tickinfo.activations = activation.push(elem);
          }
          if (elem.isActive == 0) {
            this.tickinfo.unactivations = unactivation.push(elem);
          }
        }
      }
      this.listLoading = false;
    }
  }
};
</script>
<style scoped>
.mains {
  background-color: #eee;
  overflow: hidden;
}
.admin_sider_right {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.mains_time {
  padding: 20px;
}
.mains_basic {
  padding: 30px;
  background-color: #fff;
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
  /* display: flex; */
  /* margin-bottom: 30px; */
}
.basic_content {
  display: flex;
  border: 1px solid #eee;
}
.basic_left {
  flex: 1;
  border-right: 1px solid #eee;
}
.basic_left h3 {
  font-size: 20px;
  padding: 10px 20px;
  background-color: rgb(252, 250, 250);
  border-bottom: 1px solid #eee;
}
.basic_left .basic_information {
  font-size: 18px;
  padding: 30px 20px;
  background-color: rgb(252, 252, 252);
}
.basic_information p {
  display: flex;
  padding: 10px;
}
.basic_information p span {
  flex: 1;
}
.basic_information p i {
  flex: 1;
}
.basic_tel {
  margin-bottom: 20px;
}
.basic_right {
  flex: 1;
  display: block;
  margin: auto 0;
  padding-left: 30px;
  font-size: 18px;
}
.basic_right p {
  padding: 10px 0;
}
.btn_content {
  background-color: #fff;
  border-radius: 5px;
}
.ticket_title span {
  padding: 0 30px;
}
.ticket_status {
  font-size: 26px;
  margin-bottom: 20px;
}
.orders {
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
  padding: 30px;
}
.orders h3 {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.mains_order {
  display: flex;
  font-size: 18px;
}
.order_left {
  flex: 1;
}
.order_left p {
  padding: 10px 0;
}
.order_left p span {
  margin-right: 30px;
}
.order_right {
  flex: 1;
  padding: 0 20px;
}
.order_right p {
  padding: 10px 0;
}

.mains_purchase {
  text-align: left;
  padding: 0 20px;
  background-color: #fff;
  padding: 30px;
}
.purchase_title h3 {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.purchase_left p {
  padding: 10px 0 50px 0;
}
.purchase_left p span {
  font-size: 18px;
  padding-right: 50px;
}
.price {
  text-decoration: line-through;
}
.tick_type {
  display: flex;
  flex-flow: wrap;
}
.tick_type li {
  width: 33.3333%;
  padding: 10px 0;
}

.formateFont {
  font-weight: bold;
  color: #303133;
}
</style>

